<template>
  <div class="box">
    <header>
      <div class="same">
        <div class="header">
          <i @click="goto"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use></svg></i
          ><span>预约挂号</span><span>&nbsp;</span>
        </div>
        <div class="headerTwo">
          <Position style="width: 25%"></Position>
          <input type="text" placeholder="请输入要搜索的门店" />
        </div>
      </div>
      <div class="adress">
        <div class="same"></div>
      </div>
    </header>
    <div class="content">
      <div class="same">
        <van-empty
          v-show="hospital_lists.length == 0"
          image="search"
          :style="{ padding: 0, color: '#FFF' }"
        />
        <div
          class="list"
          v-for="item in hospital_lists"
          :key="item.hospital_id"
        >
          <router-link :to="'/Register/' + item.hospitalId">
            <div class="left">
              <img
                src="https://img1.baidu.com/it/u=454388117,3355633511&fm=26&fmt=auto"
                alt=""
              />
            </div>
            <div class="right">
              <p class="title">{{ item.hospitalName }}</p>

              <p class="classs">
                <span v-for="ite in item.hospital_class" :key="ite.id">{{
                  ite.name
                }}</span>
              </p>
              <p class="address">
                <span class="addressleft">{{ item.hospitalAddress }}</span
                ><span class="addressright"
                  ><i class="km"
                    ><svg class="icon" aria-hidden="true">
                      <use
                        xlink:href="#icon-weizhi"
                        style="color: #ccc"
                      ></use></svg></i
                  >1.83km</span
                >
              </p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selecthospitals } from "../../api/hospital";
import Position from "../../components/Position.vue";
export default {
  components: { Position },
  data() {
    return {
      name: this.$route.params.name,
      hospital_lists: [],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    // sectionLeft() {
    //   setTimeout(() => {
    //     $(".box nav").scrollLeft($(".same .liang").offset().left - 15);
    //   }, 100);
    // },
    getlist() {
      selecthospitals().then((res) => {
        // console.log(res.data.data);
        this.hospital_lists = res.data.data;
        // this.hospital_lists = this.hospital_lists.filter(
        //   (item) =>
        //     item.hospital_class.filter((ites) => ites.name === this.name)[0]
        // );
      });
    },
    goto() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: #f1f1f1;
}
header {
  background: #fff;
}
.header {
  i {
    transform: rotate(180deg);
  }
  font-size: 4.7vw;
  display: flex;
  justify-content: space-between;
  padding: 3vh;
}
.headerTwo {
  height: 7vw;
  padding: 0 1.5vh;
  padding-bottom: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  input {
    margin-left: 2vw;
    background: url(../../font/font/select.png) #f7f7f7 no-repeat 2.2vw 1.5vw;
    background-size: 4.3vw;
    border: 0;
    width: 100%;
    // width: 88vw;
    font-size: 3vw;
    padding: 1vh;
    border-radius: 2.5vh;
    text-indent: 1.3rem;
    color: rgb(71, 71, 71);
  }
}
nav {
  display: flex;
  white-space: nowrap;
  overflow: auto;
  section {
    background: #fff;
    padding: 1vw 2vw;
    border-radius: 4vw;
    margin: 2vw 1vw;
    font-size: 4vw;
  }
}
.content {
  padding-bottom: 1vw;
  .list a {
    color: #333;
    margin: 2vw 0;
    padding: 1vw 4vw 4vw 4vw;
    border-radius: 1vw;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .left {
      img {
        width: 11vw;
        height: 6vh;
        border-radius: 50%;
      }
    }
    .right {
      width: 73vw;
      font-size: 4.5vw;
      .address {
        font-size: 1vw;
        color: rgb(75, 75, 75);
        margin-bottom: 0.5vw;
        margin-top: 1vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .addressleft {
          display: inline-block;
          width: 53vw;
          white-space: nowrap;
          overflow: hidden;
        }
        .addressright {
          .km {
            font-size: 3.5vw;
          }
        }
      }
      .classs {
        font-size: 1vw;
        color: rgb(117, 117, 117);
        margin-bottom: 0.5vw;
        span {
          background: #f1f1f1;
          padding: 0.1vw 0.5vw;
          transform: scale(0.85);
          display: inline-block;
        }
      }
      .merit {
        font-size: 3.5vw;
        color: rgb(88, 88, 88);
        font-size: 3.2vw;
      }
    }
  }
}
.liang {
  background: #02ce83;
  color: #fff;
}
</style>